<template>
  <div>
    <div class="header">
      <div class="header-left">
        <div class="user-circle div-align-justify-center">
          <img class="img-64-circle" :src="loginProfile.avatar" alt=""/>
        </div>
        <div class="user-content">
          <div class="user-content-role div-align-justify-center">
            <svg v-if="loginUser.isAdmin" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.0533 5.7197V10.2797C14.0533 11.0263 13.6533 11.7197 13.0066 12.0997L9.04661 14.3864C8.39994 14.7597 7.59994 14.7597 6.94661 14.3864L2.98661 12.0997C2.33994 11.7264 1.93994 11.033 1.93994 10.2797V5.7197C1.93994 4.97303 2.33994 4.27967 2.98661 3.89967L6.94661 1.61301C7.59328 1.23967 8.39327 1.23967 9.04661 1.61301L13.0066 3.89967C13.6533 4.27967 14.0533 4.96636 14.0533 5.7197Z" stroke="#424242" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M7.99987 7.33321C8.85775 7.33321 9.5532 6.63775 9.5532 5.77987C9.5532 4.92198 8.85775 4.22656 7.99987 4.22656C7.14198 4.22656 6.44653 4.92198 6.44653 5.77987C6.44653 6.63775 7.14198 7.33321 7.99987 7.33321Z" stroke="#424242" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M10.6666 11.1069C10.6666 9.90689 9.47325 8.93359 7.99992 8.93359C6.52659 8.93359 5.33325 9.90689 5.33325 11.1069" stroke="#424242" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <svg v-if="!loginUser.isAdmin" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 4.77301C11.96 4.76634 11.9133 4.76634 11.8733 4.77301C10.9533 4.73968 10.22 3.98634 10.22 3.05301C10.22 2.09968 10.9866 1.33301 11.94 1.33301C12.8933 1.33301 13.66 2.10634 13.66 3.05301C13.6533 3.98634 12.92 4.73968 12 4.77301Z" stroke="#424242" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M11.3133 9.62645C12.2266 9.77978 13.2333 9.61978 13.9399 9.14645C14.8799 8.51978 14.8799 7.49312 13.9399 6.86645C13.2266 6.39312 12.2066 6.23311 11.2933 6.39311" stroke="#424242" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M3.98001 4.77301C4.02001 4.76634 4.06667 4.76634 4.10667 4.77301C5.02667 4.73968 5.76001 3.98634 5.76001 3.05301C5.76001 2.09968 4.99334 1.33301 4.04001 1.33301C3.08668 1.33301 2.32001 2.10634 2.32001 3.05301C2.32667 3.98634 3.06001 4.73968 3.98001 4.77301Z" stroke="#424242" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M4.66669 9.62645C3.75335 9.77978 2.74669 9.61978 2.04002 9.14645C1.10002 8.51978 1.10002 7.49312 2.04002 6.86645C2.75336 6.39312 3.77335 6.23311 4.68669 6.39311" stroke="#424242" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M7.99997 9.75348C7.95997 9.74681 7.9133 9.74681 7.8733 9.75348C6.9533 9.72015 6.21997 8.96681 6.21997 8.03348C6.21997 7.08014 6.98664 6.31348 7.93997 6.31348C8.8933 6.31348 9.65997 7.08681 9.65997 8.03348C9.6533 8.96681 8.91997 9.72681 7.99997 9.75348Z" stroke="#424242" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M6.05998 11.8532C5.11998 12.4799 5.11998 13.5066 6.05998 14.1332C7.12665 14.8466 8.87331 14.8466 9.93998 14.1332C10.88 13.5066 10.88 12.4799 9.93998 11.8532C8.87998 11.1466 7.12665 11.1466 6.05998 11.8532Z" stroke="#424242" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span class="margin-left-4">{{ loginUser.isAdmin ? '管理员' : '销售员' }}</span>
          </div>
          <div class="margin-top-div-4 heading-h2">{{ loginProfile.name }}</div>
        </div>
      </div>
      <div class="header-right" @click="editProfile">
        <span>编辑个人信息</span>
      </div>
      <!--
      <template v-if="loginUser.isAdmin">
        <div class="header-nav">
          <ul id="nav" class="paragraph-p2-light">
            <li>
              <a :class="tab === profileListItemType.onJob ? 'profile-nav-active': '' "
                 @click="tabCLick(profileListItemType.onJob)"
              >在职员工({{ count.onJob }})</a>
            </li>
            <li>
              <a :class="tab === profileListItemType.outJob ? 'profile-nav-active': '' "
                 @click="tabCLick(profileListItemType.outJob)"
              >离职员工({{ count.outJob }})</a>
            </li>
          </ul>
        </div>
      </template>
      -->
    </div>
    <div v-if="loginUser.isAdmin" class="margin-top-div-175">
      <!--
      <div v-if="tab === profileListItemType.onJob">
        <main-empty v-if="count.onJob === 0" class="padding-top-div-80"
                    :list-code="profileListType" :list-item-code="profileListItemType.onJob"></main-empty>
        <template v-if="count.onJob > 0">
          <item-list :key="key.onJob"
                     :list-code="profileListType"
                     :list-item-code="profileListItemType.onJob"
                     v-on:itemNumRefreshEvent = "profileListNumInit"
          ></item-list>
          <button-right :type="profileListType" @click.native="addProfile"></button-right>
        </template>
      </div>
      <div v-if="tab === profileListItemType.outJob">
        <main-empty v-if="count.outJob === 0" class="padding-top-div-80"
                    :list-code="profileListType" :list-item-code="profileListItemType.outJob"></main-empty>
        <item-list v-if="count.outJob > 0"
                   :key="key.outJob"
                   :list-code="profileListType"
                   :list-item-code="profileListItemType.outJob"
                   v-on:itemNumRefreshEvent = "profileListNumInit"
        ></item-list>
      </div>
      -->
      <main-empty v-if="count.onJob === 0" class="padding-top-div-80"
                  :list-code="profileListType" :list-item-code="profileListItemType.onJob"></main-empty>
      <template v-if="count.onJob > 0">
        <item-list :key="key.onJob"
                   :list-code="profileListType"
                   :list-item-code="profileListItemType.onJob"
                   v-on:itemNumRefreshEvent = "profileListNumInit"
        ></item-list>
        <button-right :type="profileListType" @click.native="addProfile"></button-right>
      </template>
    </div>
    <profile-report v-if="!loginUser.isAdmin" :user-id="Number(loginUser.id)" class="margin-top-div-165"></profile-report>
  </div>
</template>

<script>
import UserAvatar from '@/static/images/profile/user-default.jpg'
import MainEmpty from "@/components/MainEmpty"
import ButtonRight from "@/components/Button/Right";
import ItemList from '@/components/ItemList'
import {getActiveAndInactiveCount, getMyProfile} from "@/request/api";
import {Toast} from "vant";
import ProfileReport from '@/components/profile/report'
export default {
  name: "ProfileViewMain",
  components: {
    ButtonRight,
    MainEmpty,
    ItemList,
    ProfileReport,
  },
  props: {},
  data() {
    return {
      tab: this.GLOBAL.listItemType.profile.onJob,
      profileListType: this.GLOBAL.listType.profile,
      profileListItemType: this.GLOBAL.listItemType.profile,
      defaultAvatar: UserAvatar,
      loginUser: {},
      loginProfile: {
        avatar: '',
        name: '',
      },
      count: {
        onJob: 0,
        outJob: 0,
      },
      key: {
        onJob: new Date().getTime(),
        outJob: new Date().getTime(),
      },
    };
  },
  mounted() {
    this.loginUser = this.$baseJS.getLoginUser()
    this.profileListNumInit()
    this.getMyProfile()
    const queryTab = this.$route.query.tab
    this.tab = queryTab ? Number(queryTab) : this.GLOBAL.listItemType.profile.onJob
  },
  methods: {
    tabCLick(tab) {
      this.tab = tab
      this.$router.push(this.GLOBAL.pathSetting.profile.main + '?tab=' + tab)
      switch (tab) {
        case this.profileListItemType.onJob:
          this.key.onJob = new Date().getTime()
          break
        case this.profileListItemType.outJob:
          this.key.outJob = new Date().getTime()
          break
      }
    },
    addProfile() {
      this.$router.push(this.GLOBAL.pathSetting.profile.add)
    },
    editProfile() {
      this.$router.push(this.GLOBAL.pathSetting.profile.info + this.loginUser.id + '?type=1')
    },
    profileListNumInit() {
      getActiveAndInactiveCount().then(res => {
        const {State, Msg, Data} = res
        if (State) {
          const { active_count, inactive_user } = Data
          this.count.onJob = active_count
          this.count.outJob = inactive_user
        } else { Toast(Msg) }
      })
    },
    getMyProfile() {
      getMyProfile({ pathParam: this.loginUser.id }).then(res => {
        const { State, Msg, Data } = res
        if (State) {
          const { name, head_image_url } = Data
          this.loginProfile.name = name
          this.loginProfile.avatar = head_image_url
        } else {
          Toast(Msg)
        }
      })
    },
    onSwiperRight() {
      this.$router.go(-1)
    }
  },
};
</script>
<style scoped>
.header {
  width: 100%;
  height: 172px;
  background: #FCD538;
  position: fixed;
  top: 0;
  z-index: 3;
}

.header-left {
  display: flex;
  flex-direction: row;
  align-items: center;

  position: absolute;
  width: 60%;
  height: 80px;
  left: 16px;
  top: 68px;

}
.user-circle {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  background: #FEEA9A;
}
.user-content {
  margin-left: 12px;
  padding: 4px;
}
.user-content-role {
  width: 60px;
}
.header-right {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 4px 8px 4px 16px;

  position: absolute;
  width: 96px;
  height: 26px;
  right: 0;
  top: 76px;
  margin-left: 16px;

  background: #FFFFFF;
  box-shadow: 0 4px 24px rgba(251, 202, 4, 0.32);
  border-radius: 16px 0 0 16px;
}
.header-nav {
  margin-top: 172px;
  flex-direction: column;
  align-items: flex-start;
  padding: 4px 16px;
  width: 100%;
  height: 42px;
  background: #FFF5CC;
  display: flex;
  justify-content: center;
}
ul li {
  display: inline;
  margin-right: 24px;
  height: 22px;
  padding-bottom: 5px;
}
ul a {
  color: #424242;
  text-decoration: none;
}

</style>